<template>
  <a-watermark content="用户名">
    <div style="margin-top: 50px"></div>
    <a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
      <a-layout>
        <a-layout-sider :style="siderStyle">
          <img
            style="margin-top: 50%"
            src="../../components/icons/G.svg"
            alt=""
          />
          <div>用户名</div>
        </a-layout-sider>

        <a-layout>
          <a-descriptions title="User Info" bordered>
            <a-descriptions-item label="用户名"
              >Cloud Database</a-descriptions-item
            >
            <a-descriptions-item label="用户账号" :span="2"
              >Prepaid</a-descriptions-item
            >

            <a-descriptions-item label="用户邮箱" :span="3"
              >1580110606@qq.com</a-descriptions-item
            >
            <a-descriptions-item label="Status" :span="3">
              <a-badge status="processing" text="Running" />
            </a-descriptions-item>
            <a-descriptions-item label="提交数量">$80.00</a-descriptions-item>
            <a-descriptions-item label="通过数量">$20.00</a-descriptions-item>
            <a-descriptions-item label="总得分">$60.00</a-descriptions-item>
            <a-descriptions-item label="提交列表">
              Data disk type: MongoDB
              <br />
              Database version: 3.4
              <br />
              Package: dds.mongo.mid
              <br />
              Storage space: 10 GB
              <br />
              Replication factor: 3
              <br />
              Region: East China 1
              <br />
              Region: East China 1
              <br />

              Region: East China 1
              <br />
            </a-descriptions-item>
          </a-descriptions>
        </a-layout>
      </a-layout>
    </a-space>
    <div style="padding-bottom: 200px"></div>
  </a-watermark>
</template>

<script lang="ts" setup>
import type { CSSProperties } from "vue";
const headerStyle: CSSProperties = {
  textAlign: "center",
  color: "#fff",
  height: 64,
  paddingInline: 50,
  lineHeight: "64px",
  backgroundColor: "#7dbcea",
};

const contentStyle: CSSProperties = {
  textAlign: "center",
  minHeight: 120,
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#108ee9",
};

const siderStyle: CSSProperties = {
  textAlign: "center",
  lineHeight: "120px",
  color: "#000",
  backgroundColor: "transparent",
};

const footerStyle: CSSProperties = {
  textAlign: "center",
  color: "#000",
  backgroundColor: "#7dbcea",
};
</script>
